<template>
  <div class="cont">
    <div class="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import { debounce } from '@/utils';

export default {
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100);
    window.addEventListener('resize', this.__resizeHandler);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    window.removeEventListener('resize', this.__resizeHandler);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');

      this.chart.setOption({
        title: {
          text: '数据总览',
          show: true,
          textStyle: {
            color: '#666',
            fontSize: 18,
            fontWeight: 'bold'
          }
        },
        legend: {
          bottom: 10,
          itemGap: 32,
          itemWidth: 16,
          itemHeight: 16,
          textStyle: { color: '#666', fontSize: 11 },
          data: ['新增诊所数量', '新增患者数量', '新医生数量', '新增咨询数量']
        },
        dataset: {
          source: [
            { product: '2020/11/01', '新增诊所数量': 10, '新增患者数量': 35, '新医生数量': 20, '新增咨询数量': 45 },
            { product: '2020/11/02', '新增诊所数量': 10, '新增患者数量': 30, '新医生数量': 25, '新增咨询数量': 45 },
            { product: '2020/11/03', '新增诊所数量': 10, '新增患者数量': 35, '新医生数量': 20, '新增咨询数量': 45 },
            { product: '2020/11/04', '新增诊所数量': 9, '新增患者数量': 39, '新医生数量': 20, '新增咨询数量': 45 },
            { product: '2020/11/05', '新增诊所数量': 9, '新增患者数量': 39, '新医生数量': 20, '新增咨询数量': 45 },
            { product: '2020/11/06', '新增诊所数量': 9, '新增患者数量': 39, '新医生数量': 20, '新增咨询数量': 45 },
            { product: '2020/11/07', '新增诊所数量': 9, '新增患者数量': 39, '新医生数量': 20, '新增咨询数量': 45 },
            { product: '2020/11/08', '新增诊所数量': 9, '新增患者数量': 39, '新医生数量': 20, '新增咨询数量': 45 }
          ]
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: { color: '#ccc' }
          },
          axisTick: { show: false },
          axisLabel: {
            color: '#666',
            fontSize: 11
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: { show: false },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 11
          }
        },
        series: [
          { type: 'bar', itemStyle: { color: '#F6AB6E' }, label: {
            show: true,
            position: 'top',
            color: '#666'
          } },
          { type: 'bar', itemStyle: { color: '#42A2FF' }, label: {
            show: true,
            position: 'top',
            color: '#666'
          } },
          { type: 'bar', itemStyle: { color: '#2EC9C7' }, label: {
            show: true,
            position: 'top',
            color: '#666'
          } },
          { type: 'bar', itemStyle: { color: '#0980D8' }, label: {
            show: true,
            position: 'top',
            color: '#666'
          } }
        ]
      });
    }
  }
};
</script>

<style scoped>
    .cont {
        width: calc(100% - 40px);
        height: 350px;
        padding: 20px;
        border: 1px solid #E4E4E4;
        border-radius: 10px;
        box-sizing: content-box;
    }
</style>
